<template>
  <div class="doctor-home">
    <header class="header">
      <div class="header-left">
        <h1>医生工作台</h1>
      </div>
      <div class="header-right">
        <el-dropdown>
          <span class="user-info">
            <el-avatar :size="32" :src="userStore.currentUser?.avatar"></el-avatar>
            <span>{{ userStore.currentUser?.name || '医生用户' }}</span>
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
    
    <div class="content">
      <el-card class="welcome-card">
        <template #header>
          <div class="card-header">
            <span>欢迎回来</span>
          </div>
        </template>
        <div class="doctor-info">
          <el-avatar :size="80" :src="userStore.currentUser?.avatar"></el-avatar>
          <div class="info-text">
            <h2>{{ userStore.currentUser?.name || '医生用户' }}</h2>
            <p class="doctor-id">医生ID: {{ userStore.currentUser?.id || 'N/A' }}</p>
          </div>
        </div>
        
        <div class="action-buttons">
          <el-button type="primary" size="large" @click="$router.push('/image-upload')">
            <el-icon><Upload /></el-icon>
            影像上传
          </el-button>
          <el-button type="warning" size="large" @click="$router.push('/ai-review')">
            <el-icon><View /></el-icon>
            AI复核
          </el-button>
          <el-button type="success" size="large" @click="$router.push('/reports')">
            <el-icon><Document /></el-icon>
            查看报告
          </el-button>
        </div>
        
        <el-card class="images-card" style="margin-top:16px;">
          <h3>我上传的影像</h3>
          <div v-if="loadingImages" class="loading">加载中...</div>
          <el-empty v-else-if="myImages.length === 0" description="暂无影像" />
          <div v-else class="image-list">
            <div v-for="img in myImages" :key="img.id" class="image-item">
              <img :src="imagingStore.getImageUrl(img.filename)" alt="thumb" class="thumb" />
              <div class="meta">
                <div class="name">{{ img.originalname }}</div>
                <div class="sub">患者ID：{{ img.patientId }}｜时间：{{ formatTime(img.uploadTime) }}</div>
              </div>
            </div>
          </div>
        </el-card>
        
        <div class="work-stats">
          <h3>今日工作量</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ pendingReviewCount || 56 }}</div>
              <div class="stat-label">待复核病例</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ todayCompletedCount || 32 }}</div>
              <div class="stat-label">今日已完成</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ totalCaseCount || 128 }}</div>
              <div class="stat-label">总病例数</div>
            </div>
          </div>
        </div>
        
        <div class="tips">
          <h3>今日提醒</h3>
          <ul>
            <li>请及时处理待复核的AI诊断结果</li>
            <li>确保所有报告在规定时间内完成</li>
            <li>注意保护患者隐私信息</li>
            <li>影像上传后系统将自动进行AI分析</li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user';
import { useImagingStore } from '../stores/imaging';
import { Upload, View, Document, ArrowDown } from '@element-plus/icons-vue';

export default {
  name: 'DoctorHome',
  components: { Upload, View, Document, ArrowDown },
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const imagingStore = useImagingStore();
    const myImages = ref([]);
    const loadingImages = ref(false);

    const loadMyImages = async () => {
      if (!userStore.currentUser?.id) return;
      loadingImages.value = true;
      try {
        const resp = await fetch(`/api/images/doctor/${userStore.currentUser.id}`);
        myImages.value = await resp.json();
      } finally { loadingImages.value = false; }
    };

    const formatTime = (iso) => { try { return new Date(iso).toLocaleString(); } catch { return iso; } };

    const handleLogout = () => {
      userStore.logout();
      router.push('/login');
    };

    onMounted(() => { loadMyImages(); });

    const pendingReviewCount = 0, todayCompletedCount = 0, totalCaseCount = 0;

    return { router, userStore, imagingStore, myImages, loadingImages, formatTime, handleLogout,
      pendingReviewCount, todayCompletedCount, totalCaseCount };
  }
};
</script>
<style scoped>
.images-card .image-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.image-item { display: flex; gap: 10px; align-items: center; background: #fff; padding: 8px; border-radius: 6px; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: #f0f2f5; }
.meta .name { font-size: 14px; color: #303133; }
.meta .sub { font-size: 12px; color: #909399; }
.loading { color: #909399; }
</style>